<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <title>销售中心-付款</title>
  <link rel="stylesheet" href="../../css/bootstrap.font.min.css"/>
  <link rel="stylesheet" href="../../css/forms.min.css"/>
  <link rel="stylesheet" href="../../css/style.css"/>
</head>
<body ng-controller="appCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top to-nav">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand to-brand" href="#"><i class="fa fa-weixin fa-fw"></i>&nbsp;&nbsp;SZG 后台管理系统</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="javascript:" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-gear"></i>&nbsp;Mr Toma&nbsp;<span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">个人信息</a></li>
            <li><a href="#">修改密码</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">退出系统</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- navbar-collapse -->
  </div>
</nav>
<!-- 菜单 start -->
<aside class="sidebar_left">
  <div class="sidebar_content">
    <ul class="nav">
      <li class="active">
        <a href="#" class="nav-link"><i class="fa fa-group"></i>销售中心</a>
        <ul class="link-lop">
          <li><a href="javascript:">旅游产品</a></li>
          <li><a href="javascript:">酒店产品</a></li>
          <li><a href="javascript:">玩乐产品</a></li>
        </ul>
      </li>
      <li><a href="#" class="nav-link"><i class="fa fa-wrench"></i>网站设置</a></li>
    </ul>
  </div>
</aside>
<!-- 菜单 end -->
<section class="content">
  <div class="con-wap">
    <!-- view start -->

    <ol class="breadcrumb border">
      <li><a href="#">销售中心</a></li>
      <li><a href="#">旅游产品查询</a></li>
      <li><a href="#">旅游产品详情</a></li>
      <li class="active">立即预定</li>
    </ol>

    <section class="w100b reser-topprompt mb20">
      <div class="reser-tpt-i active">
        <p>提交订单</p>
        <span>1</span>
      </div>
      <div class="reser-tpt-i active">
        <p>完善游客信息</p>
        <span>2</span>
      </div>
      <div class="reser-tpt-i active">
        <p>付款</p>
        <span>3</span>
      </div>
      <div class="reser-tpt-i">
        <p>交易成功</p>
        <span>4</span>
      </div>
      <div class="reser-tpt-i">
        <p>签订合同</p>
        <span>5</span>
      </div>
    </section>

    <section class="row">
      <aside class="col-md-3">
        <!-- 费用明细 -->
        <ul class="list-group reser-mingxi">
          <li class="list-group-item active">
            <h4>费用明细</h4>
          </li>
          <li class="list-group-item">
            <h4 class="mb20 text-theme">团费</h4>
            <p>成人：￥2000*2 <span class="pull-right">￥4000</span></p>
            <p>儿童：￥2000*2 <span class="pull-right">￥4000</span></p>
            <p class="text-right text-danger reser-mx-m">￥7000</p>
          </li>
          <li class="list-group-item">
            <h4 class="mb20 text-theme">附加费</h4>
            <p>单房差：￥2000*2 <span class="pull-right">￥4000</span></p>
            <p class="text-right text-danger reser-mx-m">￥7000</p>
          </li>
          <li class="list-group-item">
            <h4 class="mb20 text-theme">保险</h4>
            <p><span class="pull-right">￥4000</span> 平安境外旅游意外险：￥35*3 </p>
            <p class="text-right text-danger reser-mx-m">￥7000</p>
          </li>
          <li class="list-group-item">
            <h4 class="mb20 text-theme">优惠</h4>
            <p>成人：￥2000*2</p>
            <p class="text-right text-danger reser-mx-m">￥7000</p>
          </li>
          <li class="list-group-item">
            <h3>订单总额</h3>
            <p class="text-danger text-right fz20"> <strong>￥2000</strong></p>
          </li>
        </ul>

        <!-- 退款说明 -->
        <ul class="list-group reser-mingxi">
          <li class="list-group-item active">
            <h4>退款说明</h4>
          </li>
          <li class="list-group-item">
            <h4 class="text-theme">退款说明</h4>
            <div>内设有一个白色日晷造型的标志, 四周还立有中国传统观察天象的4种代表动物,分别是东方的苍龙、
              西方的白虎、南方的朱雀以及北方的玄武,称为「四象」。 每一象均含有7个星宿, 分别代表春夏秋冬
              四季的天象变化。另外在公园两侧的木制回栏里,设有许多跟天象、气候、节气、地球科学等相关的解
              说牌示, 使得北回归线标志公园成为一处极富教育意义的游憩据点。</div>
          </li>
        </ul>

      </aside>
      <article class="col-md-9">
        <!-- 订单详情 -->
        <div class="panel panel-default">
          <header class="panel-heading">
            <h4 >订单详情</h4>
          </header>
          <table class="table">
            <tbody>
            <tr>
              <td>订单编号：132123sfdsf11313121</td>
              <td>订单状态：<span class="text-theme">未支付</span></td>
              <td>下单时间：2016-06-26 13:00</td>
            </tr>
            <tr>
              <td>预定产品名称：大理西双版纳双飞5日游</td>
              <td>订单人数：5</td>
              <td>供应商名称：华夏旅行社</td>
            </tr>
            <tr>
              <td>出发时间：2016-06-14</td>
              <td>返回时间：2016-06-14</td>
              <td></td>
            </tr>
            <tr>
              <td>交易号：12313阿斯顿</td>
              <td>交易时间：2016-06-14</td>
              <td></td>
            </tr>
            <tr>
              <td colspan="3">倒计时：<strong class="fz20 text-theme">00:20:53</strong></td>
            </tr>
            </tbody>
          </table>
        </div>

        <!-- 请选择支付平台 -->
        <div class="panel panel-default">
          <header class="panel-heading">
            <h4>请选择支付平台</h4>
          </header>
          <nav class="tabs-table">
            <a href="javascript:">网银支付</a>
            <a href="javascript:">支付宝支付</a>
            <a href="javascript:">微信支付</a>
            <a href="javascript:">转账</a>
            <a class="active" href="javascript:">对公转账</a>
          </nav>
          <article class="panel-body">
            <table class="table table-bordered admin-form no-m">
              <tbody>
              <tr>
                <td class="bg-glow text-center" rowspan="4">付款方</td>
                <td>
                  <label class="select">
                    <select name="">
                      <option value="">选择开户行&nbsp;&nbsp;</option>
                      <option value="1">中国</option>
                      <option value="2">法国</option>
                    </select>
                    <i class="arrow double"></i>
                  </label>
                </td>
                <td class="bg-glow text-center" rowspan="4">收款方</td>
                <td>
                  <label class="select">
                    <select name="">
                      <option value="">选择开户行&nbsp;&nbsp;</option>
                      <option value="1">中国</option>
                      <option value="2">法国</option>
                    </select>
                    <i class="arrow double"></i>
                  </label>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" class="gui-input" placeholder="账号">
                </td>
                <td>账号：1325s4f54645646541</td>
              </tr>
              <tr>
                <td>
                  <input type="text" class="gui-input" placeholder="户名">
                </td>
                <td>户名：西山居是的发</td>
              </tr>
              <tr>
                <td>
                  <input type="text" class="gui-input" placeholder="备注">
                </td>
                <td></td>
              </tr>
              </tbody>
            </table>
          </article>
          <footer class="panel-footer text-right">
            <button type="button" class="btn btn-default btn-lg w120">返回</button>
            <button type="button" class="btn btn-warning btn-lg w160" id="save">立即支付</button>
          </footer>
        </div>

      </article>
    </section>

    <div class="h360"></div>
    <!-- view end -->
  </div>
</section>


<!-- 完善收据信息 -->
<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="sjModal">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h2 class="modal-title text-center">完善收据信息</h2>
      </div>
      <form action="#" id="sjForm">
        <div class="modal-body admin-form">
          <p class="clearfix">
            <span class="pull-left ml10">收款单位：东方国际旅行社</span>
            <span class="pull-left ml10">经营许可证号：L-sx-CJ00009</span>
            <span class="pull-right">经营许可证号：L-sx-CJ00009</span>
          </p>

          <div class="border p10 mb20">
            <div class="row">
              <div class="col-sm-8">
                <p>订单编号：1120614815415258215</p>
                <p>产品名称：发发看看设计的法拉盛富乐科技看空间+发快递</p>
                <p>出发时间：2016-06-14</p>
                <p>收款部门：门市部</p>
                <p>大写金额：一千两百五十万</p>
              </div>
              <div class="col-sm-4">
                <p>收款状态：<span class="text-theme">已支付</span></p>
                <p>付款人：华夏</p>
                <p>返回时间：2016-06-14</p>
                <p>收款金额：2598.00</p>
              </div>
            </div>
          </div>

          <div class="border">
            <h3 class="text-center border-b p10 no-m">费用及其作用</h3>
            <div class="p10">
              sdfasfasdfasdfasd
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default w90" data-dismiss="modal">返回</button>
          <button type="button" class="btn btn-primary w90" id="sjbtn">保存</button>
        </div>
      </form>
    </div>
  </div>
</div><!-- modal -->


<script src="../../lib/angular.min.js"></script>
<script src="../../lib/jquery.min.js"></script>
<script src="../../js/sea.js"></script>
<script src="../../js/main.js"></script>
<script>
  seajs.use('sales',function (cc) {
    cc.salesReser3();
  });
</script>
</body>
</html>